<template>
   <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="300px">
        <vxe-toolbar>
          <template #buttons>
            <vxe-input style="width:98%;padding-left:5px" v-model="roleName" type="search" placeholder="角色名称搜索" v-on:keyup.enter.native="getRolesData" @search-click="getRolesData"></vxe-input>
          </template>
        </vxe-toolbar>
        <vxe-table
          :show-header="true"
          height="440"
          border
          show-header-overflow
          show-overflow
          row-id="id"
          :row-config="{isHover: true}"
          :data="rolesData"
          @cell-click="handleCellClick">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="roleName" title="角色名称"></vxe-column>
        </vxe-table>
      </el-aside>
    <el-main>
      <vxe-toolbar style="padding-left:5px">
        <template #buttons>
          <vxe-button icon="fa fa-plus" @click="doSave()">保存</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-table
          border
          resizable
          height="420"
          row-id="id"
          highlight-hover-row
          ref="permsTable"
          :loading="loading2"
          :checkbox-config="{labelField: 'permsName'}"
          :tree-config="{transform: true, lazy: true, parentField: 'parentId', hasChild: 'leaf', children: 'children',loadMethod: loadChildrenMethod }"
          :data="permsData"
          @toggle-tree-expand="handleTreeExpand">
          <vxe-column type="checkbox" title="资源名称" width="100%" tree-node></vxe-column>
        </vxe-table>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'RoleAuthInfo',
  data () {
    return {
      loading1: false,
      loading2: false,
      roleName: '',
      rolesData: [],
      permsData: [],
      roleRow: null,
      rolePermsData: [],
      url: {
        roleAll: 'system/roleAll',
        permList: 'system/getPermListByParentId',
        rolePermList: 'system/queryRolePermsByRoleId',
        saveData: 'system/saveRolePermission'
      }
    }
  },
  mounted () {
    this.getRolesData()
    this.loadNode()
  },
  methods: {
    async getRolesData () {
      this.loading1 = true
      const { data } = await this.$store.dispatch(this.url.roleAll, { roleName: this.roleName })
      this.rolesData = [...data]
      this.loading1 = false
    },
    async getTreeData (row) {
      let parentId = '-1'
      if (row) {
        parentId = row.id
      }
      const { data } = await this.$store.dispatch(this.url.permList, { parentId })
      row.children = [...data]
      return data
    },
    /** 获取数据 */
    async loadNode () {
      this.loading2 = true
      const { data } = await this.$store.dispatch(this.url.permList, { parentId: '-1' })
      this.permsData = [...data]
      this.loading2 = false
    },
    loadChildrenMethod ({ row }) {
      return new Promise(resolve => {
        resolve(this.getTreeData(row))
      })
    },
    async handleCellClick ({ row }) {
      this.roleRow = row
      const permsTable = this.$refs.permsTable
      permsTable.setAllCheckboxRow(false) // 清除所有行的选中状态
      const { data } = await this.$store.dispatch(this.url.rolePermList, { roleId: row.id })
      if (data) {
        this.rolePermsData = [...data]
        data.forEach(element => {
          const s = permsTable.getRowById(element.permissionId)
          if (s) {
            permsTable.setCheckboxRow(s, true)
          }
        })
      }
    },
    handleTreeExpand ({ expanded, row }) {
      this.$nextTick(() => {
        setTimeout(() => {
          if (expanded) {
            const permsTable = this.$refs.permsTable
            const data = row.children
            this.rolePermsData.forEach(element => {
              if (data.some(el => { return el.id === element.permissionId })) {
                const s = permsTable.getRowById(element.permissionId)
                if (s) {
                  permsTable.setCheckboxRow(s, true)
                }
              }
            })
          }
        }, 500)
      })
    },
    async doSave () {
      if (!this.roleRow) {
        this.$utils.message.warning('请选择授权角色！')
        return
      }
      const params = { roleId: this.roleRow.id }
      const allCheckboxRow = this.$refs.permsTable.getCheckboxRecords()
      if (!this.$utils.isEmptyObject(allCheckboxRow)) {
        params.permissionIds = allCheckboxRow.map((item) => item.id)
      }
      // console.info('----------ids: ' + JSON.stringify(params))
      const { error } = await this.$store.dispatch(this.url.saveData, params)
      if (!error) {
        this.$utils.message.success('保存成功')
      }
    }
  }
}
</script>
<style lang="scss">
.my-list {
  background-color: #ffffff;
  border: 1px solid #e8eaec;
  height: 100%;
  font-size: 14px;
}
.my-list .my-list-item {
  height: 20px;
  padding: 5px 0 5px 15px;
  border-bottom: 1px solid #e8eaec;
}
</style>
